﻿<html lang="zh-CN" class="translated-ltr">
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Access-Control-Allow-Origin" content="*">

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!--    强制刷新、清缓存-->
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta http-equiv="Expires" content="0">
	<!-- CSS -->
	<link rel="stylesheet" href="css/bootstrap-reboot.min.css">
	<link rel="stylesheet" href="css/bootstrap-grid.min.css">
	<link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/nouislider.min.css">
	<link rel="stylesheet" href="css/select2.min.css">
	<link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
	<link rel="stylesheet" href="css/ionicons.min.css">
	<link rel="stylesheet" href="css/main.css">

	<!-- Favicons -->
	<link rel="icon" type="image/png" href="icon/favicon-32x32.png" sizes="32x32">
	<link rel="apple-touch-icon" href="icon/favicon-32x32.png">
	<link rel="apple-touch-icon" sizes="72x72" href="icon/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="icon/apple-touch-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="144x144" href="icon/apple-touch-icon-144x144.png">

	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Dmitry Volkov">
	<title>发布文章</title>
	<link type="text/css" rel="stylesheet" charset="UTF-8" href="https://translate.googleapis.com/translate_static/css/translateelement.css"></head>


	<!--引入axios库-->
	<script src="../js/axios.min.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入VUE库 -->
	<script src="../js/vue.min.js"></script>
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

	<!-- 引入 css -->
	<link href="../wangEditor-file/monokai_sublime.min.css" rel="stylesheet">

	<!-- 引入 js -->
	<script src="../wangEditor-file/wangEditor.min.js" type="text/javascript" charset="UTF-8"></script>

	<!-- 引入组件库 -->
	<script src="../js/js/index.js"></script>
	<style>
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}
		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
	</style>
<body>
<div id="main">

	<main class="main main--breadcrumb">
		<!-- breadcrumb -->
		<div class="breadcrumb">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<ul class="breadcrumb__wrap">
							<li class="breadcrumb__item"><a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">首页</font></font></a></li>
							<li class="breadcrumb__item breadcrumb__item--active"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">发布文章</font></font></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- end breadcrumb -->

		<div class="container">
			<div class="row">
				<div class="col-12 col-md-7 col-lg-8 col-xl-9">
					<!-- form -->
					<el-form ref="form" :model="form" action="#" class="form">
						<div class="col-12">
							<h2 class="form__title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">新文章</font></font></h2>
						</div>
						<el-form-item label="文章标题">
							<el-input v-model="form.title"></el-input>
						</el-form-item>
						<el-form-item label="帖子内容">
						</el-form-item>

						<el-form-item label="">
							<!--富文本编辑器-->
							<div id="inspectionContents" name="wang"></div>
						</el-form-item>


						<el-form-item label="发布模块">
							<el-select v-model="form.module" placeholder="请选择区域">
								<el-option v-for="(c,index) in calssify" :label="c.module" :value="c.id"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="私密等级" hidden>
							<el-select v-model="form.privateLevel" placeholder="不选择为公开">
								<el-option label="个人可见" :value="0"></el-option>
								<el-option label="关注可见" :value="1"></el-option>
								<el-option label="进入主页可见" :value="2"></el-option>
								<el-option label="完全公开" :value="3"></el-option>
							</el-select>
						</el-form-item>

						<form id="form1" name="form1" class="user" enctype="multipart/form-data" action="../SavePostImgServlet"  method="post">
							<div style="display: flex;width: 100%;margin-top: 10px;height: 100px;padding-top: 10px">
								<label for="uploadImg">
									<img :src="uploadImgUrl" alt="点击上传封面" style="height: 100px;width: 100px">
								</label>
								<input type="file" id="uploadImg" name="file" style="display: none" accept="image/jpeg,image/x-png,image/gif" v-on:change="uploadImg($event)">
								<input type="text" id="uploadImgUrlName" name="uploadImgUrlName" style="display: none" :value="uploadImgUrlName" hidden>
							</div>
							<button type="submit" class="btn btn-primary btn-user btn-block" id="registsubmit" hidden>注册
							</button>
						</form>

						<el-form-item label="关键字(关键字之间用空格分开)">
							<el-input type="textarea" v-model="form.keyword"></el-input>
						</el-form-item>


						<el-button @click="putpost">发布</el-button>
					</el-form>
					<!-- end form -->
				</div>



			</div>
		</div>
	</main>
	<!-- end main content -->



	<!-- JS -->
	<script src="js/jquery-3.4.1.min.js"></script>
	<script src="js/bootstrap.bundle.min.js"></script>
	<script src="js/owl.carousel.min.js"></script>
	<script src="js/wNumb.js"></script>
	<script src="js/nouislider.min.js"></script>
	<script src="js/select2.min.js"></script>
	<script src="js/jquery.mousewheel.min.js"></script>
	<script src="js/jquery.mCustomScrollbar.min.js"></script>
	<script src="js/main.js"></script><div id="goog-gt-tt" class="skiptranslate" dir="ltr"><div style="padding: 8px;"><div><div class="logo"><img src="https://www.gstatic.com/images/branding/product/1x/translate_24dp.png" width="20" height="20" alt="Google 翻译"></div></div></div><div class="top" style="padding: 8px; float: left; width: 100%;"><h1 class="title gray">原文</h1></div><div class="middle" style="padding: 8px;"><div class="original-text"></div></div><div class="bottom" style="padding: 8px;"><div class="activity-links"><span class="activity-link">提供更好的翻译建议</span><span class="activity-link"></span></div><div class="started-activity-container"><hr style="color: #CCC; background-color: #CCC; height: 1px; border: none;"><div class="activity-root"></div></div></div><div class="status-message" style="display: none;"></div></div>

<div class="goog-te-spinner-pos"><div class="goog-te-spinner-animation"><svg xmlns="http://www.w3.org/2000/svg" class="goog-te-spinner" width="96px" height="96px" viewBox="0 0 66 66"><circle class="goog-te-spinner-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle></svg></div></div>
</div>


<footer class="grid-footer">
	<div class="footer-fixed">
		<div class="copyright">
			<div class="info">
				<div class="contact">
					<a href="https://gitee.com/" class="github" target="_blank"><i class="fa fa-github"></i></a>
					<a href="https://wpa.qq.com/msgrd?v=3&uin=930054439&site=qq&menu=yes" class="qq" target="_blank" title="930054439"><i class="fa fa-qq"></i></a>
					<a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=gbiysbG0tbWyuMHw8K-i7uw" class="email" target="_blank" title="930054439@qq.com"><i class="fa fa-envelope"></i></a>
					<a href="https://github.com/" class="weixin"><i class="fa fa-github"></i></a>
				</div>
				<p class="mt05">
					Copyright &copy; 2022-5 Knowledge Forum V.1.0.0 Power by 项目设计
				</p>
			</div>
		</div>
	</div>
</footer>
</body>

</script>
<script>
	var v=new Vue({
		el:"#main",
		data:{
			form:{
				//标题，关键字，模块，私密等级
				title:"",
				keyword:"",
				module:"",
				privateLevel:"3",
			},
			//所有可选择模块-----------------    路漫漫其修远兮，吾将上下而求索     --------------------
			calssify:[],
			uploadImgUrl: '',//用户上传的文章封面
			uploadImgUrlName:'',//用户上传的文章封面名字
			mainbody:"",//帖子内容

			account:"121314",//登录账号
			isanswer:null,//是否为问题的回答,是，则传入问题的id
		},
		created(){
			this.reload();
			this.getmodule()
		},
		methods: {
			uploadImg(e){
				let that = this;
				let file = e.target.files[0];
				//KB单位,可以获取图片的大小，到时候可以根据图片大小进行选择上传
				let imgSize = file.size/1024;
				this.uploadImgUrlName="cover_img"+this.account+Date.parse(new Date())+".jpg";
				let reader = new FileReader();
				reader.readAsDataURL(file);
				console.info(this.uploadImgUrl)

				reader.onloadend = function () {
					// 图片的 base64 格式, 可以直接当成 img 的 src 属性值
					let dataURL = reader.result;
					//在这里就可以进行图片地址的获取了，到时候后台上传的图片就是根据这个来的
					//that.uploadImgUrl = dataURL;这个就是展示了上传的图片
					that.uploadImgUrl = dataURL;
					//这里就可以发送请求了，也可以选择之后发送，反正图片地址都获取了
					$.ajax({
						type:"post",
						url:"上传的地址",
						async:true,
						data:{
							imgUrl:dataURL,
							avatar_wx:1,
							token:token,
							uid:uid,
						},
						success:function(e){
							that.avatar=dataURL;
							alert('修改成功');
						}
					});
				}
			},
			successmessage(message) {
				this.$message({
					offset: 350,
					showClose: true,
					message: message,
					type: 'success'
				});
			},
			errorwarning(message) {
				this.$message({
					offset: 350,
					showClose: true,
					message: message,
					type: 'error'
				});
			},

			//获取富文本框的内容，以html格式
			putpost(){
				/**
				 * 判空
				 */
				if(this.form.title==''){
					this.errorwarning('标题不能为空')
					return false;
				}
				if(this.form.module==''){
					this.errorwarning('发布模块不能为空')
					return false;
				}
				if(editor.txt.html()==''){
					this.errorwarning('文章不能为空')
					return false;
				}
				//
				//拿取富文本框中的html代码   editor.txt.html().replaceAll("%","%25")
				/**
				 *axios不能读取%，会报错
				 */
				//url中也对特殊字符进行转码  &  对应  woshinidie
				this.mainbody=editor.txt.html().replaceAll("&","woshinidie")
				//% 转码，但是不需要转回去，原理未知
				this.mainbody=this.mainbody.replaceAll("%","%25")
				this.mainbody=this.mainbody.replaceAll("#","nibushiwodie")


				//所回复问题id
				let problemId = location.search.replace(/\?problemId=(\d+)/, "$1");
				this.isanswer=problemId

				console.log("--------------------init putpost-----------------------")

				console.log("mainbody:"+this.mainbody)
				let url="../SavePostServlet.s?title="+this.form.title
				url+="&keyword="+this.form.keyword
				url+="&module="+this.form.module
				url+="&privateLevel="+this.form.privateLevel
				url+="&imageUrl="+this.imageUrl
				url+="&mainbody="+this.mainbody

				url+="&account="+this.account
				url+="&isanswer="+this.isanswer
				if(uploadImgUrlName!=''){
					url+="&uploadImgUrlName="+this.uploadImgUrlName;
					function submitYouFrom(mets,path){
						$("#form1").attr("action",path);
						$("#form1").attr("method",mets);
						$('#form1').submit();
					}
					submitYouFrom('post','../SavePostImgServlet');
				}
				axios.get(url).then(res=>{
					console.log("-----------init axios-----------------")
					if(res.data=1){
						this.$alert('文章发布成功', '提示', {
							confirmButtonText: '确定',
							//点击确定之后跳转到个人主页页面
							callback: action => {
								javascript:location.href='../personal.html'
							}
						});
						return false;
					}else if(res.data<1){
						this.errorwarning('上传失败')
						return false;
					}
				})
			},


			getmodule() {
				axios.get("../QueryClassify.s").then(res => {
					this.calssify = res.data;
				})
			},
			reload() {
				this.isReload = false
				this.$nextTick(() => {
					this.isReload = true
				})
			}
		}

	})
</script>
<script>
	var v1=new Vue({
		el:"#app1",
	})
</script>
<script>
	var v1=new Vue({
		el:"#app2",
	})
</script>
<!--wangEditor富文本框初始化-->
<script type="text/javascript">
	const E = window.wangEditor
	const editor = new E('#inspectionContents')
	editor.config.height = 500
	editor.config.menuTooltipPosition = 'down'
	//限制图片大小  50M
	editor.config.uploadImgMaxSize = 50 * 1024 * 1024 //
	//限制图片类型
	editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
	//设置 editor.config.uploadImgShowBase64 = true 可使用 base64 格式保存图片。即，可选择本地图片，编辑器用 base64 格式显示图片。
	//【注意】uploadImgShowBase64（base64 格式）和 uploadImgServer（上传图片到服务器）两者不能同时使用！！！
	editor.config.uploadImgShowBase64 = true
	editor.config.zIndex = 9
	editor.create()
</script>



</html>